<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()
const username = ref('')
onMounted(async() => {
  const user = JSON.parse(localStorage.getItem('jobseekerInfo'))
  if (user && user.username) {
    username.value = user.username
  }
}) 
const logout = () => {
  ElMessageBox.confirm('确定要退出登录吗?','提示',{
      confirmButtonText: '确定', 
      cancelButtonText: '取消', 
      type: 'warning',
  }).then(() => {
      // 1.删除登录信息
      console.log('退出登录')
      localStorage.removeItem('jobseekerInfo')
      ElMessage.success('退出成功')
      router.push('/')
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消退出登录',
    })
  })
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <div class="logo"><img src="/logo.png" style="height: 50px;"></div>
        <div class="nav">
          <el-menu
            :default-active="route.path"
            class="el-menu-demo"
            mode="horizontal"
            router
          >
            <el-menu-item index="/jobseeker/umenu1">首页</el-menu-item>
            <el-menu-item index="/jobseeker/umenu2">职位查找</el-menu-item>
            <el-menu-item index="/jobseeker/umenu3">消息
              <el-badge :value="5" class="header-icon" :offset="[-8, 20]">
                <el-icon>
                  <Bell />
                </el-icon>
              </el-badge>
            </el-menu-item>
            <el-menu-item index="/jobseeker/umenu4">求职助手</el-menu-item>
            <el-menu-item index="/jobseeker/umenu5">个人简历</el-menu-item>
          </el-menu>
        </div>
        <div class="jobseeker">
          <el-dropdown>
            <span class="jobseeker-name">【{{username}}】</span>
            <template #dropdown>
              <el-dropdown-menu>
                <!-- 点击个人中心后路径变为'/jobseeker/personal-center' -->
                <router-link to="/jobseeker/personal-center">
                  <el-dropdown-item>个人中心</el-dropdown-item>
                </router-link>
                <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      
      <el-main class="main-content">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  min-height: 100vh;
}

/* 顶部导航栏 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(89, 19, 19, 0.1);
}

.nav {
  flex: 1;
  min-width: 0;
  margin: 0 20px;
}

.el-menu-demo {
  width: 100%;
}

.el-menu-item {
  padding: 0 35px !important;
}

.jobseeker {
  margin-left: auto;
}

.jobseeker-name {
  cursor: pointer;
}

/* 主体内容 */
.main-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}
</style>